import {designPage, reactive} from "plain-design-composition";
import {DemoRow} from "../../Demo/DemoRow";
import {Button, Input} from "../../../../packages";
import * as React from "react";

export const demo1 = designPage(() => {

  const state = reactive({
    formData: {} as any
  });

  return () => (
    <DemoRow title="基本用法">
      <Input width={200} v-model={state.formData.name}/>
      <span>{state.formData.name}</span>
    </DemoRow>
  );
});

export const demo2 = designPage(() => {

  const state = reactive({
    formData: { name: ['AD钙奶'], } as any
  });

  return () => (
    <DemoRow title="多值输入框">
      <Input v-model={state.formData.name} width={200} multiple/>
      {JSON.stringify(state.formData.name)}
    </DemoRow>
  );
});
export const demo3 = designPage(() => {

  const state = reactive({
    formData: {} as any
  });

  return () => (
    <DemoRow title="多值输入框:arraystring">
      <Input v-model={state.formData.name} width={200} multiple valueType="arraystring"/>
      {JSON.stringify(state.formData.name)}
    </DemoRow>
  );
});
export const demo4 = designPage(() => {

  const state = reactive({
    formData: {} as any
  });

  return () => (
    <DemoRow title="多值输入框:arrayjson">
      <Input v-model={state.formData.name} width={200} multiple valueType="arrayjson"/>
      {JSON.stringify(state.formData.name)}
    </DemoRow>
  );
});

export const demo5 = designPage(() => {

  const state = reactive({
    multiple: false,
    formData: {} as any
  });

  return () => (
    <DemoRow title="切换类型">
      <Button label="toggle" onClick={() => state.multiple = !state.multiple}/>
      <Input
        width={200}
        modelValue={state.multiple ? ['123', '456'] : '789'}
        multiple={state.multiple}
      />
      <span>{state.formData.name}</span>
    </DemoRow>
  );
});
